<template>
  <Card>
    <div class="btns" style="margin-bottom:10px;">
      <Button icon="ios-add" type="primary" @click="toAdd()">添加</Button>
    </div>
    <Table
      ref="charteredCarFixedTable"
      :columns="charteredCarFixedColumn"
      :data="charteredCarFixedData"
      :loading="charteredCarFixedLoading"
      border
      size="small"
      stripe
    >
      <template slot="busCount" slot-scope="{ row }">
        <Badge :count="row.busCount" class-name="demo-badge-alone" overflow-count="999"></Badge>
      </template>
      <template slot="action" slot-scope="{ row }">
        <a
          class="edit"
          size="small"
          style="color:#2d8cf0;font-size: 12px;"
          type="text"
          @click="edit(row)"
        >编辑</a>
        <Divider type="vertical"/>
        <a class="del" style="color:#ed4014;font-size: 12px;" @click="del(row)">删除</a>
      </template>
    </Table>
    <Row class="page" justify="end" type="flex">
      <Page
        :current="searchCharteredCarFixedForm.pageNumber"
        :page-size="searchCharteredCarFixedForm.pageSize"
        :total="charteredCarFixedTotal"
        show-total
        @on-change="changePage($event)"
      />
    </Row>
    <Modal
      v-model="charteredCarFixedModalVisible"
      :mask-closable="false"
      :title="charteredCarFixedModalTitle"
      :width="750"
    >
      <Form
        ref="charteredCarFixedForm"
        :label-width="100"
        :model="charteredCarFixedForm"
        :rules="charteredCarFixedFormValidate"
      >
        <Row>
          <Col span="12">
          <FormItem label="类型：" prop="type">
            <Input v-model="charteredCarFixedForm.type" placeholder="请输入类型"/>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="分摊金额：" prop="amount">
            <InputNumber
              v-model="charteredCarFixedForm.amount"
              :max="10000000"
              :min="0"
              style="width: 100%"
            ></InputNumber>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <FormItem label="开始日期：" prop="start_at">
            <DatePicker
              v-model="charteredCarFixedForm.start_at"
              format="yyyy-MM-dd"
              placeholder="选择时间"
              type="date"
              @on-change="charteredCarFixedForm.start_at=$event"
            ></DatePicker>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="结束日期：" prop="end_at">
            <DatePicker
              v-model="charteredCarFixedForm.end_at"
              format="yyyy-MM-dd"
              placeholder="选择时间"
              type="date"
              @on-change="charteredCarFixedForm.end_at=$event"
            ></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Form :label-width="100">
          <FormItem label="分摊范围：">
            <Select v-model="objectType">
              <Option :value="0">全部车辆</Option>
              <Option :value="1">按车辆类型</Option>
              <Option :value="2">按车辆品牌</Option>
              <Option :value="3">自定义车辆</Option>
            </Select>
          </FormItem>
        </Form>
        <Alert v-if="objectType===0" show-icon>分摊至全部车辆</Alert>
        <Alert v-if="objectType===1" show-icon>选择车辆类型进行分摊</Alert>
        <Alert v-if="objectType===2" show-icon>选择车辆品牌进行分摊</Alert>
        <Alert v-if="objectType===3" show-icon>请选择车辆</Alert>
        <div v-if="objectType===1" style="margin-top:15px">
          <RadioGroup v-model="busType" vertical>
            <Radio label="0">
              <span>燃油车</span>
            </Radio>
            <Radio label="1">
              <span>纯电动</span>
            </Radio>
          </RadioGroup>
        </div>
        <div v-if="objectType===2" style="margin-top:15px">
          <RadioGroup v-model="busBrand" vertical>
            <Radio label="0">
              <span>东风牌</span>
            </Radio>
            <Radio label="1">
              <span>亚星牌</span>
            </Radio>
            <Radio label="2">
              <span>宇通牌</span>
            </Radio>
            <Radio label="3">
              <span>中通牌</span>
            </Radio>
          </RadioGroup>
        </div>
        <div v-if="objectType===3" style="margin-top:15px">
          <Tree ref="lineTree" :data="data2" show-checkbox></Tree>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="charteredCarFixedHandleCancel">取消</Button>
        <Button
          :loading="charteredCarFixedSubmitLoading"
          type="primary"
          @click="charteredCarFixedHandleSubmit"
        >提交
        </Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {getLineLicensePlateNum} from '../../api/bus'
import {destroy, edit, fixedCostList, store, update} from '../../api/fixedCost'

export default {
  data() {
    return {
      data2: [],
      objectType: 0,
      busType: '',
      busBrand: '',
      charteredCarFixedSubmitLoading: false,
      charteredCarFixedModalType: 0,
      charteredCarFixedModalVisible: false,
      charteredCarFixedModalTitle: '',
      charteredCarFixedForm: {
        type: '',
        amount: 0,
        start_at: '',
        end_at: ''
      },
      charteredCarFixedFormValidate: {
        license_plate_num: [
          {
            required: true,
            message: '车牌号不能为空',
            trigger: 'change',
            type: 'string'
          }
        ]
      },
      searchCharteredCarFixedForm: {
        date: '',
        pageNumber: 1,
        pageSize: 10
      },
      charteredCarFixedLoading: false,
      charteredCarFixedData: [],
      modal: false,
      loading: false,
      charteredCarFixedTotal: 0,
      charteredCarFixedColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '分摊金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '开始时间',
          key: 'start_at',
          align: 'center'
        },
        {
          title: '结束时间',
          key: 'end_at',
          align: 'center'
        },
        {
          title: '分摊范围',
          key: 'object',
          align: 'center'
        },
        {
          title: '分摊车辆数',
          slot: 'busCount',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created_at',
          align: 'right'
        },
        {
          title: '操作',
          slot: 'action',
          width: 175,
          align: 'center'
        }
      ],
      lines: []
    }
  },
  mounted() {
    this.init()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    changePage(v) {
      this.searchCharteredCarFixedForm.pageNumber = v
      this.getFixedCostList()
    },
    charteredCarFixedHandleCancel() {
      this.charteredCarFixedModalVisible = false
    },
    charteredCarFixedHandleSubmit() {
      this.$refs.charteredCarFixedForm.validate(valid => {
        if (valid) {
          let depIds = ''
          if (this.objectType === 3) {
            const selectedNodes = this.$refs.lineTree.getCheckedNodes()
            if (selectedNodes.length < 1) {
              this.$Message.error('请至少选择一条数据')
              return
            }
            selectedNodes.forEach(function (e) {
              if (!isNaN(e.license_plate_num)) {
                depIds += e.license_plate_num + ','
              }
            })
            this.charteredCarFixedForm.depIds = depIds.substring(
              0,
              depIds.length - 1
            )
          } else if (this.objectType === 1) {
            this.charteredCarFixedForm.bus_type = this.busType
          } else if (this.objectType === 2) {
            this.charteredCarFixedForm.bus_brand = this.busBrand
          }
          this.charteredCarFixedForm.object_type = this.objectType
          this.charteredCarFixedSubmitLoading = true
          if (this.charteredCarFixedModalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.charteredCarFixedForm.id
            store(this.charteredCarFixedForm).then(res => {
              this.charteredCarFixedSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getFixedCostList()
                this.charteredCarFixedModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            update(
              this.charteredCarFixedForm,
              this.charteredCarFixedForm.id
            ).then(res => {
              this.charteredCarFixedSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getFixedCostList()
                this.charteredCarFixedModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        }
      })
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getFixedCostList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.charteredCarFixedModalType = 1
      this.charteredCarFixedModalTitle = '编辑'
      edit(row.id).then(res => {
        const data = res.data.formData
        data.amount = parseFloat(data.amount)
        this.charteredCarFixedForm = data
        this.objectType = data.object_type
        this.data2 = res.data.treeData
        this.busType = String(data.bus_type)
        this.busBrand = String(data.bus_brand)
        this.charteredCarFixedModalVisible = true
      })
    },
    getFixedCostList() {
      this.charteredCarFixedSelectCount = 0
      this.charteredCarFixedLoading = true
      fixedCostList(this.searchCharteredCarFixedForm).then(res => {
        this.charteredCarFixedLoading = false
        if (res.data) {
          this.charteredCarFixedData = res.data.fixedCostList
          this.charteredCarFixedTotal = res.data.count
        }
      })
    },
    handleReset(event) {
      this.$refs.searchCharteredCarForm.resetFields()
      this.searchCharteredCarForm.pageNumber = 1
      this.searchCharteredCarForm.pageSize = 10
      this.getIncomeCharteredCarList()
    },
    handleSearch(event) {
      this.searchCharteredCarForm.pageNumber = 1
      this.searchCharteredCarForm.pageSize = 10
      this.getIncomeCharteredCarList()
    },
    init() {
      this.getFixedCostList()
    },
    toAdd() {
      this.charteredCarFixedModalType = 0
      this.charteredCarFixedModalTitle = '添加'
      this.$refs.charteredCarFixedForm.resetFields()
      this.objectType = 0
      this.busBrand = ''
      this.busType = ''
      delete this.charteredCarFixedForm.id
      getLineLicensePlateNum().then(res => {
        this.data2 = res.data
        this.charteredCarFixedModalVisible = true
      })
    }
  }
}
</script>
<style>
.ivu-tabs .ivu-select-dropdown {
  left: 0 !important;
}

.demo-badge-alone {
  background: #faad14 !important;
}
</style>
